<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery.js"></script>
<script>
	$(document).ready(function(){
		$("#div_size").click(function(){
			var txt="";
			txt+="Width of div: " + $("#div").width();
			txt+="<br/>";
			txt+="Height of div: " + $("#div").height();
			$("#size").html(txt);
			
			var innerTxt="";
			innerTxt+="Inner width of div: " + $("#div").innerWidth();
			innerTxt+="<br/>";
			innerTxt+="Inner height of div: " + $("#div").innerHeight();
			$("#inner_size").html(innerTxt);
			
			var outerTxt="";
			outerTxt+="Outer width of div: " + $("#div").outerWidth();
			outerTxt+="<br/>";
			outerTxt+="Outer height of div: " + $("#div").outerHeight();
			$("#outer_size").html(outerTxt);
		});
		$("#doc_size").click(function(){
			var txt="";
			txt+="Document size: " + $(document).width() + "," + $(document).height();
			txt+="\n";
			txt+="Window size: " + $(window).width() + "," + $(window).height();
			alert(txt);
		});
	});
</script>
<title>Dimension</title>
</head>
<body>
<div id="div" 
style="height:300px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;">
<p id="size"></p>
<p id="inner_size"></p>
<p id="outer_size"></p>
</div>
<br>
<button id="div_size">Display size of div element</button>
<button id="doc_size">Display size of document and window</button>
</body>
</html>